<template>
  <div class="sidebar-wrapper" :class="{ visible: showVisible }">
    <div class="sidebar-content" @contextmenu.stop>
      <div class="sidebar-menu">
        <div
          v-for="item in navconfig"
          :key="item.id"
          class="menu-item"
          :class="{ 'menu-item-active': navid === item.id }"
          @click="handleMenuItemClick(item)"
          @contextmenu="handleRightClick($event, item)"
        >
          <div class="menu-icon">
            <span :class="['iconfont', item.icon]"></span>
          </div>
          <span class="menu-text">{{ item.name }}</span>
        </div>
        <!-- 将“+”号按钮放置在菜单列表的最后面 -->
        <div class="add-button" @click="toggleDialog">
          <span class="iconfont icon-tianjia"></span>
        </div>
      </div>
    </div>
  </div>
  <div v-if="isDialogVisible" class="dialog">
    <div class="dialog-content">
      <div class="input-group">
        <input v-model="navname" type="text" placeholder="输入内容1" />
      </div>
      <!-- 添加图标选择区域 -->
      <div class="icon-select">
        <div class="icon-preview">
          <span class="iconfont" :class="selectedIcon"></span>
        </div>
        <div class="icon-list">
          <div
            class="icon-item"
            v-for="icon in icons"
            :key="icon"
            @click="selectIcon(icon)"
          >
            <span class="iconfont" :class="icon"></span>
          </div>
        </div>
      </div>
      <div class="dialog-actions">
        <button @click="cancelDialog">取消</button>
        <button @click="submitDialog">确定</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useStore } from "vuex";
import { ref, defineProps, computed, inject } from "vue";
import { nanoid } from "nanoid";
import icons from "../../config/icon.js";

// 使用 Vuex 状态管理
const store = useStore();

const props = defineProps({
  isVisible: Boolean,
});

const showVisible = computed(() =>
  store.getters["getsidebars"] ? "true" : props.isVisible
);

const navid = computed(() => store.getters["getnavid"]);

const navconfig = computed(() => {
  return store.getters["getnavconfig"].map((item) => ({
    icon: item.icon,
    id: item.id,
    name: item.name,
  }));
});

const selectedIcon = ref(icons[0]);
const selectedItem = ref(null); // 用于存储当前选中的菜单项数据

const selectIcon = (icon) => {
  selectedIcon.value = icon;
};

const handleMenuItemClick = (item) => {
  store.commit("setnavid", item.id);
};

const showContextMenu = inject("showContextMenu");
// 首页鼠标右键点击弹窗列表数据
const menulist = ref([
  {
    label: "编辑图标",
    action: (data) => {
      // 打开编辑对话框并填充数据
      selectedItem.value = { ...data };
      navname.value = data.name;
      selectedIcon.value = data.icon;
      isDialogVisible.value = true;
    },
  },
  {
    label: "删除分组",
    action: (data) => {
      const currentNavConfig = store.getters["getnavconfig"];
      // 过滤掉要删除的分组
      const updatedNavConfig = currentNavConfig.filter(
        (item) => item.id !== data.id
      );
      // 更新 Vuex 中的导航配置
      store.commit("setnavconfig", updatedNavConfig);
      if (navid.value === data.id) {
        store.commit("setnavid", currentNavConfig[0]?.id || null);
      }
    },
  },
]);

const handleRightClick = (event, item) => {
  event.preventDefault(); // 阻止默认的右键菜单显示
  showContextMenu(event, menulist.value, item);
};

// 弹出框相关
const isDialogVisible = ref(false);
const navname = ref("");

const toggleDialog = () => {
  // 重置表单数据
  selectedItem.value = null;
  navname.value = "";
  selectedIcon.value = icons[0];
  isDialogVisible.value = !isDialogVisible.value;
};

const cancelDialog = () => {
  // 重置表单数据
  selectedItem.value = null;
  navname.value = "";
  selectedIcon.value = icons[0];
  isDialogVisible.value = false;
};

const submitDialog = () => {
  if (selectedItem.value) {
    // 修改操作
    const currentNavConfig = store.getters["getnavconfig"];
    const updatedNavConfig = currentNavConfig.map((item) =>
      item.id === selectedItem.value.id
        ? { ...item, name: navname.value, icon: selectedIcon.value }
        : item
    );
    store.commit("setnavconfig", updatedNavConfig);
  } else {
    // 添加操作
    const id = nanoid(6);
    const obj = {
      id: id,
      icon: selectedIcon.value,
      name: navname.value,
      children: [],
    };
    const list = store.getters["getnavconfig"];
    list.push(obj);
    store.commit("setnavconfig", list);
  }

  // 关闭对话框并重置数据
  selectedItem.value = null;
  navname.value = "";
  selectedIcon.value = icons[0];
  isDialogVisible.value = false;
};
</script>

<style scoped>
/* 侧边栏容器 */
.sidebar-wrapper {
  position: fixed;
  left: -70px;
  top: 0;
  height: 100vh;
  width: 70px;
  display: flex;
  align-content: center;
  align-items: center;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 999;
  will-change: transform;
  backface-visibility: hidden;
}

/* 可见状态 */
.sidebar-wrapper.visible {
  transform: translateX(80px);
}

/* 侧边栏内容容器 */
.sidebar-content {
  width: 100%;
  height: 70%;
  border: 1px rgb(151, 151, 151) solid;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 2px 0 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 侧边栏菜单容器 */
.sidebar-menu {
  flex: 1;
  width: 100%;
  padding: 8px 0;
  overflow-y: auto; /* 允许垂直滚动 */
  position: relative;
}

/* 隐藏滚动条 */
.sidebar-menu::-webkit-scrollbar {
  width: 4px; /* 设置滚动条的宽度 */
}

/* 隐藏滚动条轨道外层 */
.sidebar-menu::-webkit-scrollbar-track {
  display: none; /* 完全隐藏滚动条轨道 */
}

/* 自定义滚动条滑块 */
.sidebar-menu::-webkit-scrollbar-thumb {
  background-color: #888; /* 滑块背景颜色 */
  border-radius: 2px; /* 滑块圆角 */
  border: none; /* 去掉滑块边框 */
}

/* 去掉滚动条轨道（外部包裹） */
.sidebar-menu::-webkit-scrollbar-track-piece {
  background-color: transparent; /* 轨道背景颜色 */
}

/* 菜单项 */
.menu-item {
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.2s ease;
  width: calc(100% - 16px);
  min-height: 40px;
  margin: 4px 8px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  cursor: pointer;
  box-sizing: border-box;
}

/* 可见状态 */
.visible .menu-item {
  opacity: 1;
  transform: translateX(0);
}

/* 文本溢出处理 */
.menu-text {
  font-size: 12px;
  color: #5f6368;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-top: 4px;
}

/* 激活状态 */
.menu-item-active {
  background-color: rgba(232, 240, 254, 0.9) !important;
  position: relative;
}

/* 图标样式 */
.menu-icon {
  width: 100%;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  transition: transform 0.2s ease; /* 添加过渡效果 */
}

.menu-icon:hover {
  transform: scale(1.2); /* 悬停时放大 */
}

.iconfont {
  font-size: 22px;
}

/* + 号按钮样式 */
.add-button {
  width: calc(100% - 16px);
  min-height: 40px;
  margin: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.add-button:hover {
  background-color: #e0e0e0;
  transform: scale(1.05);
}

.add-button .iconfont {
  font-size: 24px;
  color: #409eff;
}

/* 弹出框样式 */
.dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-content {
  width: 500px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  padding: 30px;
  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.input-group {
  margin-bottom: 24px;
}

input {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 15px;
  outline: none;
  transition: all 0.3s ease;
}

input:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.15);
}

/* 图标选择区域 */
.icon-select {
  margin-bottom: 28px;
  display: flex;
  gap: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  background-color: #fafafa;
}

.icon-preview {
  width: 90px;
  height: 90px;
  border: 2px dashed #ccc;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.icon-preview:hover {
  border-color: #409eff;
}

.icon-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  flex: 1;
}

.icon-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #f8f8f8;
}

.icon-item:hover {
  background-color: #409eff;
  color: white;
}

/* 弹出框按钮样式 */
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  margin-top: 10px;
}

button {
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:first-child {
  background-color: white;
  border: 1px solid #e0e0e0;
  color: #666;
}

button:first-child:hover {
  background-color: #f5f5f5;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

button:last-child {
  background-color: #409eff;
  border: none;
  color: white;
}

button:last-child:hover {
  background-color: #3687d4;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(32, 154, 255, 0.3);
}
</style>
